<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <!--v-model 指令在表单控件元素上创建双向数据绑定-->

    <div id="app">
        <p>input 元素：</p>
        <input v-model="message" placeholder="编辑我……">
        <p>消息是: {{ message }}</p>

        <p>textarea 元素：</p>
        <p style="white-space: pre">{{ message2 }}</p>
        <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
    </div>

    <div id="app1">
        <p>单个复选框：</p>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
        <br>
        <span>选择的值为: {{ checked }}</span>
        <p>多个复选框：</p>
        <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
        <label for="runoob">Runoob</label>
        <input type="checkbox" id="google" value="Google" v-model="checkedNames">
        <label for="google">Google</label>
        <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
        <label for="taobao">taobao</label>
        <br>
        <span>选择的值为: {{ checkedNames }}</span>
    </div>

    <div id="app2">
        <input type="radio" id="runoob" value="Runoob" v-model="picked">
        <lable for="runoob">Runoob</lable>
        <br>
        <input type="radio" id="google" value="Google" v-model="picked">
        <label for="google">Google</label>
        <br>
        <span>选中值为: {{ picked }}</span>
    </div>

    <div id="app3">
        <select name="fruit" v-model="selected">
            <option value="">选择一个网站</option>
            <option value="www.runoob.com">Runoob</option>
            <option value="www.google.com">Google</option>
        </select>
        <div id="output">
            选择的网站是: {{selected}}
        </div>
    </div>
    <div id="app4">
        <!-- 在 "change" 而不是 "input" 事件中更新 -->
        <input v-model.lazy="msg">
        <span>app4 值为: {{ msg }}</span>
        <br>
        <input v-model.number="age" type="number">
        <span>app4 值为: {{ age }}</span>
        <br>
        <input v-model.trim="mess">
        <span>app4 值为: {{ mess }}</span>
    </div>

    <div id="app5">
        <p>
            全选：
        </p>
        <input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()">
        <label for="checkbox">
            {{checked}}
        </label>
        <p>
            多个复选框：
        </p>
        <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
        <label for="runoob">
            Runoob
        </label>
        <input type="checkbox" id="google" value="Google" v-model="checkedNames">
        <label for="google">
            Google
        </label>
        <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
        <label for="taobao">
            taobao
        </label>
        <br>
        <span>
		选择的值为:{{checkedNames}}
	</span>
    </div>


    <script type="text/javascript" src="../vue.js"></script>
    <script type="text/javascript">
        //v-model 会根据控件类型自动选取正确的方法来更新元素
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Runoob',
                message2: '菜鸟教程\r\nhttp://www.runoob.com'
            }
        });
        //复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：
        var app1 = new Vue({
            el: '#app1',
            data: {
                checked : 11,
                checkedNames: []
            }
        });
        //单选按钮 双向数据绑定
        var app2 = new Vue({
            el: '#app2',
            data: {
                picked : 'Runoob'
            }
        });

        // select 列表
        var app3 = new Vue({
            el: '#app3',
            data: {
                selected: ''
            }
        });


        //修饰符
        // .number 如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），
        // 可以添加一个修饰符 number 给 v-model 来处理输入值：
        // .trim 如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
        /* .lazy 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，
        但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：*/
        var app4 = new Vue({
            el: '#app4',
            data: {
                msg: '111',
                age:14,
                mess:"aaa"
            }
        });

        //全选与取消全选
        var app5 = new Vue({
            el: '#app5',
            data: {
                checked: false,
                checkedNames: [],
                checkedArr: ["Runoob", "Taobao", "Google"]
            },
            methods: {
                changeAllChecked: function() {
                    if (this.checked) {
                        this.checkedNames = this.checkedArr
                    } else {
                        this.checkedNames = []
                    }
                }
            },
            watch: {
                "checkedNames": function() {
                    if (this.checkedNames.length == this.checkedArr.length) {
                        this.checked = true
                    } else {
                        this.checked = false
                    }
                }
            }
        })

    </script>
</body>
</html>